<template>
  <div>
    <NavBar
      :title="title"
      right-text="保存"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div v-if="this.num==1">
      <input type="text" v-model="nickname" />
    </div>
    <div v-else-if="this.num==2">
      <RadioGroup v-model="radio">
        <CellGroup>
          <Cell title="男" clickable @click="radio = '1'">
            <template #right-icon>
              <Radio name="1" />
            </template>
          </Cell>
          <Cell title="女" clickable @click="radio = '2'">
            <template #right-icon>
              <Radio name="2" />
            </template>
          </Cell>
        </CellGroup>
      </RadioGroup>
    </div>
    <div v-else>
      <CheckboxGroup v-model="result">
        <CellGroup>
          <Cell
            v-for="(item, index) in list"
            clickable
            :key="index"
            :title="`${item.name}`"
            @click="toggle(index)"
          >
            <template #right-icon>
              <Checkbox :name="item.val" ref="checkboxes" />
            </template>
          </Cell>
        </CellGroup>
      </CheckboxGroup>
    </div>
  </div>
</template>

<script>
import {
  NavBar,
  RadioGroup,
  Radio,
  CellGroup,
  Cell,
  Checkbox,
  CheckboxGroup,
} from "vant";
import { upMsg } from "../../https/https";
export default {
  components: {
    NavBar,
    RadioGroup,
    Radio,
    CellGroup,
    Cell,
    Checkbox,
    CheckboxGroup,
  },
  data() {
    return {
      radio: "1",
      num: "",
      nickname: "",
      title: "",
      sex: "333",
      list: [
        {name:"语文",val:1},
        {name:"数学",val:2},
        {name:"英语",val:3},
        {name:"物理",val:4},
        {name:"化学",val:5},
        {name:"生物",val:6},
        {name:"政治",val:7},
        {name:"信息技术",val:8},
      ],
      result: [],
    };
  },
  mounted() {
    var use = this.$route.query.num;
    var name = this.$route.query.nickname;
    var xingb = this.$route.query.sex;
    if (use == 1) {
      this.nickname = name;
      this.num = use;
      this.title = "修改昵称";
    } else if (use == 2) {
      this.sex = xingb;
      this.num = use;
      this.title = "修改性别";
    }
  },
  methods: {
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
      console.log(index)
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      if (this.num == 1) {
        upMsg({
          nickname: this.nickname,
        }).then((res) => {
          console.log(res);
        });
        this.$router.go(-1);
      } else if (this.num == 2) {
        if (this.radio == 1) {
          this.sex = 0;
          upMsg({
            sex: this.sex,
          }).then((res) => {
            console.log(res);
          });
        } else if (this.radio == 2) {
          this.sex = 1;
          upMsg({
            sex: this.sex,
          }).then((res) => {
            console.log(res);
          });
        }
        this.$router.go(-1);
      }
    },
  },
};
</script>

<style>
</style>